<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷炫图片展</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
	    <script type='text/javascript' src="js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="js/three.min.js"></script>
		<script type="text/javascript" src="js/assets.min.js"></script>
		<script type="text/javascript" src="js/preloadjs.min.js"></script>
		<script type="text/javascript" src="js/TweenMax.min.js"></script>
		<script type="text/javascript" src="js/Stats.js"></script>
		<script type="text/javascript" src="js/image-gallery-three.min.js"></script>
	    <script src="js/3Droller.js" type="text/javascript" charset="utf-8"></script>
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	    <link rel="stylesheet" type="text/css" href="css/3Droller.css"/>
	    <script type="text/javascript">
	    	$(document).ready(function(){
	    		$('.tlP').on('click',function(){
	    			$('.navall').addClass('toleft');
	    		});
	    	});
	    </script>
	</head>
	<body>
	<div class="music">
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="http://music.163.com/outchain/player?type=0&id=85347412&auto=1&height=430"></iframe>
	</div>
	<div class="showstyle">
		 <a href="#" class="defP">default perspective</a>
	     <a href="#" class="trP">top right perspective</a>
		 <a href="#" class="tlP">top left perspective</a>
	</div>
	<div class="navall">
	   <span class="gobefore"><a href="#" class="prev">prev</a></span>
	   <span class="goafter"><a href="#" class="next">next</a></span>
	   <div class="goto">	</div>
	</div>
	<div class="box">	</div>
	 
	</body>
</html>
